<template>
  <div ref="boxRef" class="box"></div>
</template>

<script lang="ts" setup>
import { init, type EChartsType, type EChartsOption } from 'echarts'
import { onBeforeUnmount, onMounted, ref, shallowRef } from 'vue'

const boxRef = ref()
// 实例
let myChart = shallowRef<EChartsType>()

const options: EChartsOption = {
  title: {
    text: 'ECharts 入门示例'
  },
  tooltip: {},
  legend: {
    data: ['销量']
  },
  xAxis: {
    data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
  },
  yAxis: {},
  series: [
    {
      name: '销量',
      type: 'bar',
      data: [5, 20, 36, 10, 10, 20]
    }
  ]
}

function onResize() {
  console.log('onResize')
  myChart.value?.resize()
}

onMounted(() => {
  const a = init(boxRef.value)
  console.log('a', a)
  myChart.value = a
  console.log('myChart.value', myChart.value)

  console.log('===', a === myChart.value)
  myChart.value?.setOption(options)

  console.log('myChart', myChart)

  window.addEventListener('resize', onResize)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', onResize)
  myChart.value?.dispose()
})
</script>

<style>
.box {
  /* width: 500px; */
  height: 400px;
  border: 1px solid #ccc;
}
</style>
